<template>
  <!-- 会员信息 -->
  <div>
    <div class="content-box">
      <div class="title">
        <div class="col-xs-6">储值卡信息</div>
        <div class="col-xs-6" style="text-align: right;">
          <i class="glyphicon glyphicon-pencil" style="cursor: pointer;"></i>
        </div>
      </div>

      <el-form ref="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="卡号：">
              {{detail.medicalCardCode?detail.medicalCardCode:"暂无"}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员类型：">
              {{detail.levelName?detail.levelName:"暂无"}}
              <el-button @click="openSet(detail)" style="float:right;margin-top:5px;marigin-top:10px;">设置会员</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期时间：">
              {{detail.levelTime?detail.levelTime:"暂无"}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <table border="0" class="basic_table" width="100%">
        <tr height="40">
          <td>卡号：</td>
          <td>{{detail.medicalCardCode?detail.medicalCardCode:"暂无"}}</td>
          <td>会员类型：</td>
          <td>
            {{detail.levelName?detail.levelName:"暂无"}}
            <el-button @click="openSet(detail)" style="float:right;margin-top:5px;marigin-top:10px;">设置会员</el-button>
          </td>
        </tr>
        <tr>
          <td>到期时间：</td>
          <td>{{detail.levelTime?detail.levelTime:"暂无"}}</td>
        </tr>
      </table> -->
    </div>
    <div class="content-box">
      <div class="title">
        <div class="col-xs-6">折扣情况</div>
        <div class="col-xs-6" style="text-align: right;">
          <i class="glyphicon glyphicon-pencil" style="cursor: pointer;"></i>
        </div>
      </div>

      <el-form ref="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12" v-for="(item,index) in detail.levelProjectRelation" :key="index">
            <el-form-item :label="item.projectName">
              {{item.discount}}%
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <ul class="vip_info">
        <li v-for="(item,index) in detail.levelProjectRelation" :key="index">{{item.projectId | changeProject}} {{item.discount}}%</li>
      </ul> -->
      <!-- <table border="0" class="basic_table" width="100%">
        <tr height="40">
          <td>检验医嘱：</td>
          <td></td>
          <td>检查医嘱：</td>
          <td></td>
        </tr>
        <tr height="40">
          <td>治疗医嘱：</td>
          <td></td>
          <td>处方医嘱：</td>
          <td></td>
        </tr>
        <tr height="40">
          <td>诊疗费：</td>
          <td></td>
          <td>其他收费：</td>
          <td></td>
        </tr>
      </table> -->
    </div>
    <div class="content-box">
      <div class="title">
        <div class="col-xs-6">储值卡情况</div>
        <div class="col-xs-6" style="text-align: right;">
          <i class="glyphicon glyphicon-pencil" style="cursor: pointer;"></i>
        </div>
      </div>

      <el-form ref="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账户余额：">
              <span v-if="detail!=null">￥{{detail.patientMoney}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计赠送：">
              <span v-if="detail!=null">￥{{detail.grandPresenter}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计充值：">
              <span v-if="detail!=null">￥{{detail.storedValue}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计消费：">
              <span v-if="detail!=null">￥{{detail.theCumulative}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button @click="onJoin(detail)">充值</el-button>
            <el-button @click="openRefund(detail)">退款</el-button>
            <el-button @click="openRecord(detail)">查看记录</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- <table border="0" class="basic_table" width="100%">
        <tr height="40">
          <td>本金金额：</td>
          <td v-if="detail!=null">￥{{detail.patientMoney}}</td>
          <td>赠送金金额：</td>
          <td v-if="detail!=null">￥{{detail.grandPresenter}}</td>
        </tr>
        <tr height="40">
          <td>累计充值：</td>
          <td v-if="detail!=null">￥{{detail.storedValue}}</td>
          <td>累计消费：</td>
          <td v-if="detail!=null">￥{{detail.theCumulative}}</td>
        </tr>
        <tr height="40">
          <td colspan="4">
            <el-button @click="onJoin(detail)">充值</el-button>
            <el-button @click="openRefund(detail)">退款</el-button>
            <el-button @click="openRecord(detail)">查看记录</el-button>
          </td>
        </tr>
      </table> -->
    </div>
    <set v-model="dialogEdit" v-if="dialogEdit" :curItem="curItem" @success="getDetail"></set>
    <pay v-model="dialogJoin" v-if="dialogJoin" :curItem="curItem" @success="getDetail"></pay>
    <refund v-model="dialogRefund" v-if="dialogRefund" :curItem="curItem" @success="getDetail"></refund>
    <list v-model="dialogList" v-if="dialogList" :curItem="curItem"></list>
  </div>
</template>
<script>
export default {
  props: ["detail"],
  data() {
    return {
      dialogJoin: false,
      dialogEdit: false, //支付
      dialogRefund: false, //退款
      dialogList: false, //充值记录
      curItem: null,
      vipInfo: ""
    };
  },
  mounted() {
    let th = this;
    this.$nextTick(function() {
      //th.getVipInfo();
    });
  },
  methods: {
    //充值
    onJoin(obj) {
      this.dialogJoin = true;
      this.curItem = obj;
    },
    //设置会员
    openSet(curItem) {
      let th = this;
      th.dialogEdit = true;
      th.curItem = curItem;
    },
    //退款
    openRefund(item) {
      let th = this;
      th.dialogRefund = true;
      th.curItem = item;
    },
    //充值记录
    openRecord(item) {
      let th = this;
      th.dialogList = true;
      th.curItem = item;
    },
    getVipInfo() {
      // let th = this;
      // let levelId = th.detail.levelId;
      // if (levelId) {
      // } else {
      // }
    },
    getDetail() {
      let th = this;
      th.$emit("success");
    }
  },
  components: {
    set: () => import("../_com/setVip.vue"),
    pay: () => import("../_com/payV2.vue"),
    refund: () => import("../_com/refundV2.vue"),
    list: () => import("../_com/recordListV2.vue")
  }
};
</script>
<style lang="scss" scoped>
@import "../_css/detail.scss";
.vip_info {
  display: inline-block;
  width: 100%;
  padding: 0px;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  li {
    width: 50%;
    display: inline-block;
    text-indent: 10px;
    line-height: 35px;
  }
}
.content-box {
  border: none;
}
.visit_detail_box .content-box .title {
  padding-left: 0;
  background: none;
}
.visit_detail_box .content-box table {
  border: none;
}
</style>

